<template>
	<uv-modal ref="orderCcModal" title="价格说明" :confirmColor="theme== 'fs'? '#006BFE' : '#0BCA89'" confirm-text="知道了"
		:asyncClose="true" @confirm="onCancel" @cancel="onCancel">
		<view class="w-100" style="max-height: 600px;overflow-y: auto;">
			<view class="w-100 solid">
				<view class="table-row header-row">
					<view class="table-col solid-right">基准计价</view>
					<view class="table-col solid-left">说明</view>
				</view>

				<view class="table-row">
					<view class="table-col solid-right">作业类型</view>
					<view class="table-col" :class="theme== 'fs'? 'text-blue' : 'text-green'">{{homeworkTypeName}}
					</view>
				</view>
				<view class="table-row col-1">
					<view class="table-col solid-right">{{homeworkType==1?'作物类型':'货物类型'}}</view>
					<view class="table-col solid-left" :class="theme== 'fs'? 'text-blue' : 'text-green'">
						{{detailData.cropType}}</view>
				</view>
				<view class="table-row">
					<view class="table-col solid-right">{{homeworkType==1?'面积（亩）':'重量（吨）'}}</view>
					<view class="table-col solid-left" :class="theme== 'fs'? 'text-blue' : 'text-green'">
						{{area}}{{homeworkType==1?'亩':'吨'}}</view>
				</view>
				<view class="table-row col-1" v-if="homeworkType==1">
					<view class="table-col solid-right">推荐亩用量（升）</view>
					<view class="table-col solid-left" :class="theme== 'fs'? 'text-blue' : 'text-green'">
						{{detailData.acreUsage}}升/亩</view>
				</view>
				<view class="table-row" v-if="homeworkType==1">
					<view class="table-col solid-right">亩用量超出每升增加单价</view>
					<view class="table-col solid-left" :class="theme== 'fs'? 'text-blue' : 'text-green'">
						{{detailData.exceedRecommend}}元</view>
				</view>
				<view class="table-row col-1">
					<view class="table-col solid-right">基准单价</view>
					<view class="table-col solid-left" :class="theme== 'fs'? 'text-blue' : 'text-green'">
						{{detailData.price}}元</view>
				</view>
				<view class="table-row">
					<view class="table-col solid-right">起步价</view>
					<view class="table-col solid-left" :class="theme== 'fs'? 'text-blue' : 'text-green'">
						{{detailData.startingPrice}}元</view>
				</view>

			</view>
			<view class="w-100 solid margin-top">
				<view class="table-row header-row">
					<view class="table-col solid-right">优惠政策</view>
					<view class="table-col solid-left">说明</view>
				</view>

				<view class="table-row" v-for="(item, index) in priceData" :key="index">
					<view class="table-col solid-right">
						<template v-if="homeworkType==1">
							超出面积({{item.excessArea}}亩)减少基准单价
						</template>
						<template v-else>
							超出重量({{item.excessArea}}吨)减少基准单价
						</template>
					</view>
					<view class="table-col" :class="theme== 'fs'? 'text-blue' : 'text-green'">{{item.excessAreaPrice}}元
					</view>
				</view>
				<!-- <view class="table-row col-1">
					<view class="table-col solid-right">超出面积(30亩)减少基准单价</view>
					<view class="table-col solid-left text-green">2元</view>
				</view> -->
			</view>

			<view class="text-center margin-tb">
				<text>所以本次单价为：</text>
				<text class="text-red">{{priceExp}}元/{{homeworkType==1?'亩':'吨'}}</text>
			</view>
		</view>
	</uv-modal>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['theme'])
		},
		data() {
			return {
				cropType: '',
				homeworkType: '',
				homeworkTypeName: '',
				detailData: {},
				priceData: {},
				area: 0,
				cropAcreUsage: 0,
				excessArea: 0,
				excessAreaPrice: 0,
				priceExp: ''
			}
		},
		methods: {
			show(data) {
				this.cropType = data.cropType
				this.homeworkType = data.homeworkType
				this.homeworkTypeName = data.homeworkTypeName
				this.area = data.area
				this.cropAcreUsage = data.cropAcreUsage
				this.$refs.orderCcModal.open();
				this.loadData()
			},
			onCancel() {
				this.$refs.orderCcModal.closeLoading()
				this.$refs.orderCcModal.close();
			},
			loadData() {
				this.excessArea = 0
				this.excessAreaPrice = 0
				this.$http.get(`/cadre/price/details`, {
					params: {
						cropType: this.cropType,
						homeworkType: this.homeworkType
					}
				}).then(res => {
					console.log(res)
					res.data.exceedRecommend = res.data.exceedRecommend || 0
					this.detailData = res.data
					this.priceData = JSON.parse(res.data.policies)
					this.priceData.forEach(item => {
						if (item.excessArea && this.area >= item.excessArea * 1) {
							this.excessArea = item.excessArea
							this.excessAreaPrice = item.excessAreaPrice
						}
					})
					if (this.cropAcreUsage > this.detailData.acreUsage) {
						let total = (this.cropAcreUsage - this.detailData.acreUsage) * this.detailData
							.exceedRecommend + Number(this.detailData.price) - Number(this.excessAreaPrice)
						// console.log('total', total)
						total = total.toFixed(2)
						this.priceExp =
							`(${this.cropAcreUsage} - ${this.detailData.acreUsage})*${this.detailData.exceedRecommend} + (${this.detailData.price} - ${this.excessAreaPrice}) = ${total}`
					} else {
						let total = Number(this.detailData.price) - Number(this.excessAreaPrice)
						total = total.toFixed(2)
						this.priceExp =
							`(${this.detailData.price} - ${this.excessAreaPrice}) = ${total}`
					}
				})

			}
		},
	}
</script>

<style scoped>
	.table-row {
		display: flex;
		border-bottom: 1px solid #E0E4EC;
		/* padding: 16px 0; */
		align-items: center;
	}

	.table-row:last-child {
		border-bottom: none;
	}

	.header-row {
		background-color: #F2F2F2;
		border-radius: 8px;
		font-weight: 500;
	}

	.table-col {
		flex: 1;
		font-size: 15px;
		text-align: center;
		padding: 14px 0;
	}

	.col-1 {
		background: #FAFAFA;
	}
</style>